<template name="basics">
	<view>
		<scroll-view scroll-y class="page">
			<swiper class="screen-swiper round-dot" :indicator-dots="false" :circular="true" :autoplay="true" interval="5000"
			 duration="500">
				<swiper-item @click="clickArticle(articleList[0].article_id)">
					<image mode="aspectFill" :src="articleList[0].cover_image"></image>
					<view class="cu-bar bg-shadeBottom" style="margin-top: -50px;">
						<text class="text-cut" style="font-size: 18px; margin: 0 auto;">{{articleList[3].article_title}}</text>
					</view>
				</swiper-item>
				<!-- <swiper-item @click="clickArticle(articleList[4].article_id)">
					<image mode="aspectFill" :src="articleList[4].cover_image"></image>
					<view class="cu-bar bg-shadeBottom" style="margin-top: -50px;">
						<text class="text-cut" style="font-size: 18px; margin: 0 auto;">{{articleList[4].article_title}}</text>
					</view>
				</swiper-item> -->
			</swiper>
			<!-- <view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input v-model="keyword" :adjust-position="false" type="text" placeholder="搜索文章" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow-blur round" @click="searcBlog">搜索</button>
				</view>
			</view> -->
			<!--文章类卡片-->
			<view class="cu-card case" :class="isCard?'no-card':''" v-for="(item,index) in articleList" :key="index" @click="clickArticle(item.article_id)">
				<view class="cu-item shadow">
					<view class="image" style="height: 370rpx;">
						<!-- v-if="item.photoList" :src="item.photoList[0]" -->
						<image mode="aspectFit" :src="item.cover_image"></image>
						<view class="cu-tag bg-blue">{{item.category_name}}</view>
						<view class="cu-bar bg-shadeBottom"> <text class="text-cut" style="font-size: 18px; margin: 0 auto;">{{item.article_title}}</text></view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item" style="height: 40px;">
							<view class="content flex-sub">
								<view class="text-gray text-sm flex justify-between">
									<view class="text-gray text-sm" style="font-size: 26rpx;">
										<text style="display: inline;">
											<text style="margin-left: -60px;margin-right: 96px;">
												<text class="cuIcon-peoplefill margin-lr-xs"></text>{{item.nickname}}
											</text>
											<!-- <text class="cuIcon-attentionfill margin-lr-xs"></text> -->
											<text class="cuIcon-share margin-lr-xs"></text>{{item.share_count || 0}}
											<text class="cuIcon-favorfill margin-lr-xs"></text>{{item.collect_length || 0}}
											<text class="cuIcon-messagefill margin-lr-xs"></text>{{item.comment_length || 0}}
											<text class="cuIcon-appreciatefill margin-lr-xs"></text>{{item.like_length || 0}}
										</text>
										<!-- <text class="cuIcon-timefill margin-lr-xs"></text>{{item.add_time | formatTime}} -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<cu-footer></cu-footer>
		</scroll-view>
	</view>
</template>
<script>
	import cuFooter from '../../components/footer/footer.vue'
	import APP from '../../App.vue';
	export default {
		components: {
			cuFooter
		},
		data() {
			return {
				category_id: 0,
				page: 1,
				page_size: 10,
				total: 0,
				articleList: [],
			}
		},
		onLoad: function() {
			// Promise((resolve) => {

			// })
			this.getArticleList(this.page);

		},
		onShow:function(){
			let _this=this
			this.getArticleList(this.page);
		},
		filters: {
			formatTime: function(time) { //
				let date = new Date(time * 1000);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				let day = date.getDate().toString().padStart(2, '0');
				let hour = date.getHours().toString().padStart(2, '0');
				let minute = date.getMinutes().toString().padStart(2, '0');
				let second = date.getSeconds().toString().padStart(2, '0');
				return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
			}
		},
		methods: {
			getArticleList: function(page) {
				let _this = this;
				uni.request({
					url: 'https://wzq0307.com/api/article/list',
					method: 'GET',
					data: {
						page: page,
						page_size: _this.page_size,
						category_id: _this.category_id
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							_this.page = page;
							_this.articleList = res.data.data.articleList;
							_this.total = res.data.data.total;

						} else {
							alert("获取文章列表失败，具体信息：" + res.data.message);
						}

						// // 记录在本地
						// uni.setStorageSync("token", datamd5); 
						// uni.setStorageSync("time", data.time);
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}

				})
			},
			clickArticle: function(articleId) {
				uni.navigateTo({
					url: '../detail/detail?article_id=' + articleId,
				})
				// uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
				// 	// delta: 1,
				// 	success: function() {
				// 		// beforePage.onLoad(); // 执行前一个页面的onLoad方法
				// 		_this.getarticleList(_this.article_id);
				// 	},
				// });
			}
		}
	}
</script>

<style>
	.page {
		height: 100vh;
	}
</style>
